<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>人脸采集</title>
    <link rel="stylesheet" href="/static/temp/layui/css/layui.css" media="all">
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script src="/static/temp/layui/layui.js" charset="utf-8"></script>

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#camera {
				/* float: left; */
				margin: 20px;
			}

			#contentHolder {
				width: 700px;
				height: 700px;
				margin: 0 auto;
				margin-bottom: 10px;
			}

			#btn_snap {
				margin: 0 auto;
				border: 1px solid #f0f0f0;
				background: #5CACEE;
				color: #FFF;
				width: 100px;
				height: 36px;
				line-height: 36px;
				border-radius: 8px;
				text-align: center;
				cursor: pointer;
				cursor: pointer;
				/*禁止选择*/
				-webkit-touch-callout: none;
				/* iOS Safari */
				-webkit-user-select: none;
				/* Chrome/Safari/Opera */
				-khtml-user-select: none;
				/* Konqueror */
				-moz-user-select: none;
				/* Firefox */
				-ms-user-select: none;
				/* Internet Explorer/Edge */
				user-select: none;
				/* Non-prefixed version, currently not supported by any browser */
			}
			#imgBoxxx {
				width: 200px;
				margin: 60px 20px 20px;
			}
			/* 隐藏滚动条 */
			.hide-scrollBar::-webkit-scrollbar {
				display: none;
				overflow-y: scroll;
			}

			.hide-scrollBar {
				-ms-overflow-style: none; 
				scrollbar-width: none;
				overflow-y: scroll;
			}

			/* 整个flex盒子内元素在底部 */
			.all-align-end {
				align-items: flex-end;
				-webkit-align-items: flex-end;
				-o-align-items: flex-end;
				-moz-align-items: flex-end;
				-ms-align-items: flex-end;
			}

			/* 整个flex盒子内元素在右部 */
			.all-justify-end {
				justify-content: flex-end;
				-webkit-justify-content: flex-end;
				-o-justify-content: flex-end;
				-moz-justify-content: flex-end;
				-ms-justify-content: flex-end;
			}

			/* 采用弹性盒子布局 */
			.flex {
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
			}

			/* 垂直排列 */
			.direction-column {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				-moz-box-orient: vertical;
				-moz-box-direction: normal;
				flex-direction: column;
			}

			/* 垂直水平居中 */
			.justify-align-center {
				justify-content: center;
				align-items: center;
				-o-justify-content: center;
				-o-align-items: center;
				-webkit-justify-content: center;
				-webkit-align-items: center;
				-moz-justify-content: center;
				-moz-align-items: center;
				-ms-justify-content: center;
				-ms-align-items: center;
			}

			/* 水平居中 */
			.justify-center {
				-webkit-justify-content: center;
				-moz-box-pack: center;
				box-pack: center;
				justify-content: center;
			}

			/* 垂直居中 */
			.align-center {
				-webkit-box-align: center;
				-webkit-align-items: center;
				-moz-box-align: center;
				box-align: center;
				align-items: center;
			}

			/* 超出部分自动换行 */
			.row_wrap {
				-webkit-flex-flow: row wrap;
				-webkit-box-orient: horizontal;
				-webkit-box-lines: multiple;
				-moz-flex-flow: row wrap;
				box-orient: horizontal;
				box-lines: multiple;
				flex-flow: row wrap;
			}

			/* 等宽分散排列两侧有边距 */
			.space-around {
				justify-content: space-around;
				-webkit-justify-content: space-around;
				-o-justify-content: space-around;
				-moz-justify-content: space-around;
				-ms-justify-content: space-around;
			}

			/* 分散排列两侧无边距 */
			.space-between {
				justify-content: space-between;
				-o-justify-content: space-between;
				-moz-justify-content: space-between;
				-ms-justify-content: space-between;
				-webkit-justify-content: space-between;
			}

			/* 自动占满剩余屏幕 */
			.flex-all {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				-moz-box-flex: 1;
				box-flex: 1;
				flex: 1;
			}

			/* 子元素位于最下方排列 */
			.child-end {
				align-self: flex-end;
				-webkit-align-self: flex-end;
				-o-align-self: flex-end;
				-moz-align-self: flex-end;
				-ms-align-self: flex-end;
			}

			/* 元素内容超出父元素保持自身尺寸不被压缩 */
			.flex-shrink {
				flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-o-flex-shrink: 0;
				-moz-flex-shrink: 0;
				-ms-flex-shrink: 0;
			}

			#form{
				display: none;
			}

			.layui-form-label {
				width: 100px;
			}

			.layui-input-block{
				margin-left: 130px;
			}
		</style>
	</head>


	<body>
		<input value="{$admin_id}" id="adminId" type="hidden" />
		<div id="camera">
			<div id="contentHolder">
				<video id="video" width="700" height="700" autoplay></video>
				<canvas style="display:none;" id="canvas" width="300" height="300"></canvas>
			</div>
			<div id="btn_snap">拍照</div>
		</div>
		<div id="form" class="layui-form">
			<div class="layui-form-item">
				<div class="flex" style="padding: 15px 25px;">
					<div style="height: 50px;width: 50px;border-radius: 50%;overflow: hidden;margin-right: 30px;">
						<img id="headImg" style="height: 100%;width: 100%;" />
					</div>
					<div class="flex direction-column space-between">
						<div class="flex align-center">
							<p id="nickName" style="margin-right: 20px;">昵称</p>
							<span class="layui-badge" id="star"></span>
						</div>
						<p id="phone">手机号</p>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">电子卡余额</label>
					<div class="layui-input-inline">
						<p id="useryue" style="color: red;padding: 9px 0;"></p>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">福利金</label>
					<div class="layui-input-inline">
						<p id="welfare" style="color: red;padding: 9px 0;"></p>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label"><i style="color: red;">*</i>选择员工</label>
					<div class="layui-input-block">
						<select id="yuangong" lay-verify="required">
							<option value="">请选择服务的员工</option>
						</select>
					</div>
				</div>
			</div>
			<div style="display: flex;">
				<div style="flex: 1;">
					<p style="margin-bottom: 20px;color: red;padding-left: 20px;">电子卡余额核销</p>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">电子卡商品</label>
							<div class="layui-input-block">
								<select id="dianzikashangpin" lay-verify="required">
									<option value="">请选择要核销的电子卡商品</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">核销电子卡余额</label>
							<div class="layui-input-inline">
								<input type="number" autocomplete="off" class="layui-input" id="balance">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-normal" id="hexiao">核销</button>
						</div>
					</div>
				</div>

				<div style="flex: 1;">
					<p style="margin-bottom: 20px;color: red;padding-left: 45px;">福利卡核销</p>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">福利卡商品</label>
							<div class="layui-input-block">
								<select id="fulishangpin" lay-verify="required">
									<option value="">请选择要核销的福利商品</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-normal" id="hexiaofulijin">核销</button>
						</div>
					</div>
				</div>

				<div style="flex: 1;">
					<p style="margin-bottom: 20px;color: red;padding-left: 45px;">次卡核销</p>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">核销次卡</label>
							<div class="layui-input-block">
								<select id="cika" lay-verify="required">
									<option value="">请选择要核销的次卡</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-normal" id="hexiaocika">核销次卡</button>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="padding: 20px;">
				<div class="layui-inline">
					<button class="layui-btn layui-btn-normal" id="back">返回</button>
				</div>
				<div class="layui-inline">
					<button class="layui-btn layui-btn-normal" id="refresh">刷新</button>
				</div>
			</div>
		</div>
		<script>
			layui.use(['layer','form'], function(){
				let layer = layui.layer,
						userid = null,//用户id
						isshiyong = false,//是否使用福利金
						form = layui.form;
				var canvas = document.getElementById("canvas"),
				pzBtn = document.getElementById("btn_snap"),
				context = canvas.getContext("2d"),
				video = document.getElementById("video");
				// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
				if (navigator.mediaDevices === undefined) {
					navigator.mediaDevices = {};
				}
				// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
				// 使用getUserMedia，因为它会覆盖现有的属性。
				// 这里，如果缺少getUserMedia属性，就添加它。
				if (navigator.mediaDevices.getUserMedia === undefined) {
					navigator.mediaDevices.getUserMedia = function(constraints) {
						// 首先获取现存的getUserMedia(如果存在)
						var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
						// 有些浏览器不支持，会返回错误信息
						// 保持接口一致
						if (!getUserMedia) {
							return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
						}
						//否则，使用Promise将调用包装到旧的navigator.getUserMedia
						return new Promise(function(resolve, reject) {
							getUserMedia.call(navigator, constraints, resolve, reject);
						});
					}
				}
				var constraints = {
					audio: false,
					video: {
						width: 720,
						height: 720
					}
				}
				navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
					var video = document.querySelector('video');
					// 旧的浏览器可能没有srcObject
					if ("srcObject" in video) {
						video.srcObject = stream;
					} else {
						//避免在新的浏览器中使用它，因为它正在被弃用。
						video.src = window.URL.createObjectURL(stream);
					}
					video.onloadedmetadata = function(e) {
						video.play();
					};
				})
				.catch(function(err) {
					console.log(err.name + ": " + err.message);
				});
				pzBtn.addEventListener("click", function() {
					let loading = layer.load(2)
					// 点击，canvas画图
					context.drawImage(video, 0, 0, 300, 300);
					// 获取图片base64链接
					var image = canvas.toDataURL('image/png');
					// // 定义一个img
					// var img = new Image();
					// //设置属性和src
					// img.id = "imgBoxxx";
					// img.src = image;
					// //将图片添加到页面中
					// document.body.appendChild(img);
					// base64转文件
					let face = dataURLtoFile(image, 'aa.png');
					let forData = new FormData()
					forData.append('face',face)
					$.ajax({
						type : "post",
						url : 'https://meiye.kangyekeji.co/api/Face2/face_search',
						data : forData,
						processData : false,
						contentType : false,
						success : function(resUserid){
							layer.close(loading)
							if(resUserid.code == 200){
								userid = resUserid.data
								getUserContent(userid)
							}else{
								layer.msg(resUserid.msg)
							}
						}
					});
				})

				//返回
				$('#back').on('click',function(){
					$("#camera").show()
					$("#form").hide()
				})

				//刷新
				$("#refresh").on('click',function(){
					getUserContent(userid)
				})

				form.on('switch(switchTest)', function(data){
					isshiyong = data.elem.checked
				});

				//核销福利金
				$("#hexiaofulijin").on('click',function(){
					if(!$("#yuangong").val()){
						layer.msg('请选择服务的员工')
					}else if(!$("#fulishangpin").val()){
						layer.msg('请选择要核销的福利卡商品')
					}else{
						layer.confirm('您确定要核销福利金商品吗?', {icon: 3, title:'核销提示'}, function(index){
							$.post('https://meiye.kangyekeji.co/api/UserCard/setCard',{
								card_id: $("#fulishangpin").val(),
								to_user_id: $("#yuangong").val(),
							},function(res){
								if(res.code == 200){
									layer.msg('扣款成功');
									$("#isfuli").val('');
									getUserContent(userid)
								}else{
									layer.msg(res.msg)
								}
								layer.close(index);
							})
						});
					}
				})

				//核销电子卡余额
				$("#hexiao").on('click',function(){
					if(!$("#balance").val()){
						layer.msg('请填写核销金额')
					}else if(!$("#yuangong").val()){
						layer.msg('请选择服务的员工')
					}else if(!$("#dianzikashangpin").val()){
						layer.msg('请选择要核销的电子卡商品')
					}else if(Number($("#useryue").text()) < Number($("#balance").val())){
						layer.msg('用户余额不足')
					}else{
						layer.confirm('您确定要扣除电子卡余额吗?', {icon: 3, title:'扣款提示'}, function(index){
							$.post('https://meiye.kangyekeji.co/api/OrderMoney/setCardMoney',{
								user_id: userid,
								admin_id: $("#adminId").val(),
								number: $("#balance").val(),
								to_user_id: $("#yuangong").val(),
								goods_id: $("#dianzikashangpin").val()
							},function(res){
								if(res.code == 200){
									layer.msg('扣款成功');
									$("#balance").val('');
									getUserContent(userid)
								}else{
									layer.msg(res.msg)
								}
								layer.close(index);
							})
						});
					}
				})

				//核销次卡
				$("#hexiaocika").on('click',function(){
					if(!$("#cika").val()){
						layer.msg('请选择要核销的次卡')
					}else if(!$("#yuangong").val()){
						layer.msg('请选择服务的员工')
					}else{
						layer.confirm('您确定要核销一次该次卡吗?', {icon: 3, title:'核销次数提示'}, function(index){
							$.post('https://meiye.kangyekeji.co/api/UserCard/setCard',{card_id: $("#cika").val(),to_user_id: $("#yuangong").val()},function(res){
								if(res.code == 200){
									layer.msg('核销成功');
									getUserContent(userid)
								}else{
									layer.msg(res.msg)
								}
								layer.close(index);
							})
						});
					}
				})
				getContent()

				//获取用户信息
				function getUserContent(resUserid){
					$.post('https://meiye.kangyekeji.co/api/My/getUserInfo',{user_id: resUserid},function(res){
						if(res.code == 200){
							$("#headImg").attr('src',res.data.head_img);
							$("#nickName").text(res.data.nickname);
							$("#phone").text(res.data.phone);
							$("#useryue").text(res.data.user_shop.card_money);
							$("#star").text(res.data.user_shop.star_id + '星会员');
							$("#welfare").text(res.data.user_shop.money_gold);
							$.post('https://meiye.kangyekeji.co/api/UserCard/getCardList',{user_id: resUserid,status: 1,curr: 1,limit: 10000},function(res){
								$("#cika").html('');
								$("#cika").append(`<option value="">请选择要核销的次卡</option>`);
								res.data.forEach(val => {
									$("#cika").append(`<option value="${val.id}">${val.name}(${val.card_number})</option>`);
								})
								form.render('select')
							})
							//获取福利卡商品下拉框数据
							$.post('https://meiye.kangyekeji.co/api/UserCard/getCardList',{
								user_id: userid,
								status: 1,
								curr: 1,
								limit: 1000,
								type: 2
							},function(res){
								$("#fulishangpin").html('');
								$("#fulishangpin").append(`<option value="">请选择福利金商品</option>`);
								res.data.forEach(val => {
									$("#fulishangpin").append(`<option value="${val.id}">${val.name}</option>`);
								})
								form.render('select')
							})
							$("#camera").hide()
							$("#form").show()
						}else{
							layui.msg(res.msg)
						}
					})
				}

				//获取所有下拉框信息
				function getContent(){
					//获取员工下拉框数据
					$.post('https://meiye.kangyekeji.co/api/Make/getTechnListAll',{admin_id: $("#adminId").val()},function(res){
						$("#yuangong").html('');
						$("#yuangong").append(`<option value="">请选择服务的员工</option>`);
						res.data.forEach(val => {
							$("#yuangong").append(`<option value="${val.id}">${val.nickname}</option>`);
						})
						form.render('select')
					})
					//获取电子卡商品下拉框数据
					$.post('https://meiye.kangyekeji.co/api/Home/getGoodsLists',{
						cate_id: 0,
						admin_id: $("#adminId").val(),
						type: 1,
						curr: 1,
						limit: 1000
					},function(res){
						$("#dianzikashangpin").html('');
						$("#dianzikashangpin").append(`<option value="">请选择电子卡商品</option>`);
						res.data.forEach(val => {
							$("#dianzikashangpin").append(`<option value="${val.id}">${val.title}</option>`);
						})
						form.render('select')
					})
				}
			});
			function dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			}
		</script>
	</body>
</html>
